<template>
     <!-- 轮播图 -->
     <el-carousel :interval="5000" type="card" height="250px" class="carousel" indicator-position="none" arrow="never">
          <el-carousel-item v-for="item in Banner" :key="item">
               <img :src="ReadImageSrc + item.banner_src" alt="" class="img">
          </el-carousel-item>

     </el-carousel>
     <!-- 折叠面板 -->
     <div class="Collapse">
          <p style="color: rgb(168, 230, 255);">详情信息</p>
          <el-collapse v-model="activeNames" @change="handleChange" accordion>
               <el-collapse-item :title="item.collapse_title" :name="item.collapse_id" v-for="item in Collapse">
                    <div>
                         {{ item.collapse_content }}
                    </div>
               </el-collapse-item>
          </el-collapse>
     </div>
     <!-- 统计组件 -->
     <div class="Statistic">
          <el-col :span="6" v-for="item in Statistic">
               <el-statistic :title="item.statistic_title" :value="item.statistic_value" style="color:rgb(168, 230, 255);" />
          </el-col>
     </div>
     <div class="Show">
          <!-- 用户展示 -->
          <el-card class="box-card">
               <div style="float: left;">
                    <el-avatar shape="square" :size="100" :src="ReadImageSrc + Avatar" />
                    <p style="color: red;">{{ User_name }}</p>
               </div>
               <div style="float: right;">
                    <p>职位:{{ Rola }}</p>
                    <p>IP:{{ IP }}</p>
               </div>
          </el-card>
          <el-card class="box-card">
               <p>语言详情</p>
               <div class="demo-progress" v-for="item in language">
                    <p>{{ item.name }}</p><el-progress :percentage="item.value" />
               </div>
          </el-card>
          <el-card class="box-card">
               <el-countdown title="刷新倒计时" :value="Timevalue" />
          </el-card>
     </div>
     <div>
          <span>个人感言 </span>
          <el-divider content-position="left">励志</el-divider>
          <span>
               在未来的脚步上，永远前进。
          </span>
          <el-divider>
               <el-icon><star-filled /></el-icon>
          </el-divider>
          <span>在别人的眼光中成长！</span>
          <el-divider content-position="right">自信</el-divider>
     </div>
</template>
<script setup lang="ts">
import { ChatLineRound, Male } from '@element-plus/icons-vue'
import { Edit, Picture, UploadFilled } from '@element-plus/icons-vue'
import { ref, reactive, onMounted } from 'vue'
import { getBannerList_admin } from '../service/Banner.js'
import { getCollapse } from '../service/Collapse.js'
import { getStatistic } from '../service/Statistic.js'
import { ReadImageSrc } from '/src/config.js'
import { getWeclome } from '../service/Weclome.js'
import '../assets/media/Home.css'
import Cookie from "js-cookie"
import { getUser } from '../service/Login.js'
import { StarFilled } from '@element-plus/icons-vue'




const activeNames = ref([1])//*默认敞开第一页
const Timevalue = ref(Date.now() + 1000 * 60 * 60 * 5)
// 接受参数
const Banner_List = ref()
const Banner = reactive(Banner_List)
const Collapse_List = ref()
const Collapse = reactive(Collapse_List)
const Statistic_List = ref()
const Statistic = reactive(Statistic_List)
const User_List = ref()
const User_name = localStorage.getItem('User')
const Rola = ref()
const Avatar = ref()
const IP = localStorage.getItem("IP")


//*语言详情
const language = ref([{ "name": "Vue", 'value': "78" }, { "name": "JavaScript", "value": "24" }, { "name": "CSS", "value": "20" }, { "name": "HTML", "value": "14" }])

onMounted(() => {
     //*获取Token值
     const Token = Cookie.get("UUID")
     if (Token != null) {

          // 获取轮播图列表->后台管理系统
          getBannerList_admin().then((res: any) => {
               Banner_List.value = res.data
          })
          // 获取折叠面板
          getCollapse().then((res: any) => {
               Collapse_List.value = res.data
          })
          // 获取统计组件
          getStatistic().then((res: any) => {
               Statistic_List.value = res.data
          })

          setTimeout(() => {
               //*获取欢迎语
               getWeclome()
          }, 1000);

     }
     const data = { guid: localStorage.getItem('Guid'), login_user: localStorage.getItem('User'), login_password: localStorage.getItem('PassWord') }
     if (location.pathname != "/login") {
          getUser(data).then((res: any) => {
               // console.log(res)
               User_List.value = res.data
               //*获取头像
               Avatar.value = User_List.value[1].user_img
               //*获取rola
               Rola.value = res.data[0].rola_content
          })
     }

})

</script>
<style>
.Show {
     display: flex;
     justify-content: center;
     align-items: center;
     flex-wrap: wrap;
}

.box-card {
     width: 300px;
     margin-left: 10px;
     margin-top: 50px;
}

.text_p {
     font-size: 15px;
}

p {
     font-size: 17px;
     color: rgb(168, 230, 255);
}

.Notice {
     position: relative;
     top: 20px;
     width: 600px;
}

.el-statistic__number {
     color: rgb(168, 230, 255);
}

.el-col {
     text-align: center;
}

.Statistic {
     justify-content: center;
     align-content: center;
     border: 0px solid blue;
     width: 600px;
     display: flex;
}

.carousel {
     border: 0px solid blue;
     width: 1000px;
     height: 300px;
}

.img {
     width: 350px;
     border-radius: 10px;
}

.Collapse {
     position: relative;
     border: 0px solid blue;
     float: right;
     width: 650px;
     left: -0px;
     top: -295px;
}
</style>